body {
    .content {
        width: 180px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);

        .sex {
            width: 100%;
            height: 36px;
            position: relative;

            .male,
            .female {
                height: 34px;
                float: left;
                width: 83px;
                border: 2px solid #ccc;
                border-radius: 3px;
                cursor: pointer;
                position: relative;
                line-height: 34px;
                text-align: center;

                &:hover {
                    border: 2px solid #0095ff;
                    background-color: #ddd;
                    position: relative;
                    z-index: 333;
                }

                input {
                    opacity: 0;
                    // opacity: 1;
                    position: absolute;
                }

                input[type="radio"]:checked {
                    background: red;
                }
            }

            .active {
                background: url(../images/icon-right.png) no-repeat right bottom;
                z-index: 9999;
                border: 2px solid #0095ff;
            }

            .female {
                // background: green;
                margin-left: 6px;
            }
        }

        .disable {
            margin-top: 10px;
            width: 176px;
            height: 32px;
            border: 2px solid #ccc;
            text-align: center;
            line-height: 34px;
            cursor: default;
            color: #ccc;

            .disabled {
                opacity: 0;
                position: absolute;
                cursor: default;
            }
        }

        .active {
            background: url(../images/icon-right.png) no-repeat right bottom;
            z-index: 9999;
            border: 2px solid #0095ff;
        }

        .checked {
            margin-top: 10px;
            height: 32px;
            width: 176px;
            // border: 2px solid #ccc;
            text-align: center;
            line-height: 32px;

            input {
                opacity: 0;
                position: absolute;
            }
        }

        .many {
            .task1, .task2, .task3 {
                width: 176px;
                height: 32px;
                border: 2px solid #ccc;
                margin-top: 10px;
                text-align: center;
                line-height: 32px;

                &:hover {
                    border: 2px solid #0095ff;
                }
            }
            input {
                opacity: 0;
                position: absolute;
            }
        }
    }
}